<template>
  <div>
    <ConfigProvider
      :locale="pageConfig.lang"
      :theme="{ algorithm: themeMap[computedPageConfig.algorithm] }"
      :component-size="computedPageConfig.componentSize"
    >
      <RouterView />
    </ConfigProvider>
  </div>
</template>

<script setup lang="ts">
import { ConfigProvider, theme } from 'ant-design-vue';
import './initial';
import usePageStore from './store/pages';
import { pageConfig } from './initial';

const themeMap: any = {
  dark: theme.darkAlgorithm,
  light: theme.defaultAlgorithm,
};

nextTick(() => {
  const pageStore = usePageStore();
  pageConfig.value.componentSize = pageStore.$state.componentSize;
});
const computedPageConfig = computed(() => pageConfig.value);
</script>
